<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop" style="width: 80%">
        船舶规范 {{ bigName }} {{ name }}
      </div>
      <div :style="{ width: tableWidth }">
        <div class="loadExcel" style="width: 50%; margin-left: 10px">
          <div
            class="button"
            v-if="roleId == 2 || roleId == 1"
            @click="sureAdd()"
          >
            确认
          </div>
          <div class="buttonBack" @click="backIndexPage()">返回</div>
        </div>
        <div class="manyInput">
          <div class="iuptInnerContain">
            <div class="inputInner">
              <div class="name">规范名称:</div>
              <div class="inputContainer">
                <input
                  type="text"
                  v-model="data.name"
                  placeholder="规范名称"
                  :disabled="this.roleId != 2 && this.roleId != 1"
                />
              </div>
            </div>
            <div class="inputInner">
              <div class="name">开始实行时间:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="data.executionDate"
                    type="date"
                    placeholder="开始实行时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </el-config-provider>
              </div>
            </div>
            <div class="inputInner">
              <div class="name">版本号:</div>
              <div class="inputContainer">
                <input
                  type="text"
                  v-model="data.version"
                  placeholder="版本号"
                  :disabled="this.roleId != 2 && this.roleId != 1"
                />
              </div>
            </div>
            <!-- lastModifiedDate -->
            <div class="inputInner">
              <div class="name">最后更新时间:</div>
              <div class="inputContainer">
                <el-config-provider :locale="locale">
                  <el-date-picker
                    v-model="data.lastModifiedDate"
                    type="date"
                    placeholder="最后更新时间"
                    format="YYYY/MM/DD"
                    value-format="YYYY/MM/DD"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </el-config-provider>
              </div>
            </div>
          </div>
        </div>
        <div class="centerContainner" style="height: 72vh">
          <!-- <div class="leftPicAndList">
            <div class="loadExcel" style="margin-left: 0">
              <div
                class="button"
                v-if="roleId == 2 || roleId == 1"
                @click="uploadImage()"
              >
                {{ imgName }}
              </div>
            </div>
            <div class="topImage">
              <img :src="src1" style="width: 100%; height: 100%" alt="" />
            </div>
            <div class="lastListContain">
              <div class="LineContain">
                <div class="lineListLeft">IMO号:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.imo_number"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">
                  MMSI号:
                </div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.mmsi_number"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>

              <div class="LineContain">
                <div class="lineListLeft">呼号:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.wail"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">
                  卫通号码:
                </div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.weitongNumber"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">船用手机号:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.marineMobilePhone"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">总长:</div>
                <div class="lineListRight">
                  <input
                    type="number"
                    v-model="data.totalLength"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">型宽:</div>
                <div class="lineListRight">
                  <input
                    type="number"
                    v-model="data.moldedBreadth"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">型深:</div>
                <div class="lineListRight">
                  <input
                    type="number"
                    v-model="data.depthMoulded"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">满载吃水:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.fullLoadDraft"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">
                  主机功率:
                </div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.hostPower"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">侧推功率:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.sidePushPower"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">配员:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.manning"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">货仓类型:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.cargoHoldType"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">
                  货仓容量:
                </div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.cargoCapacity"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div class="lineListLeft">最大装载速率:</div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.maxLoadingRate"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div class="lineListLeft" style="border-left: none">
                  最大加注速率:
                </div>
                <div class="lineListRight">
                  <input
                    type="text"
                    v-model="data.maxFillingRate"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div
                  class="lineListLeft"
                  style="border-bottom: 1px solid black"
                >
                  GCU能力:
                </div>
                <div
                  class="lineListRight"
                  style="border-bottom: 1px solid black"
                >
                  <input
                    type="text"
                    class="lastinput"
                    v-model="data.gcu_capacity"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
                <div
                  class="lineListLeft"
                  style="border-bottom: 1px solid black; border-left: none"
                >
                  加注站:
                </div>
                <div
                  class="lineListRight"
                  style="border-bottom: 1px solid black"
                >
                  <input
                    type="text"
                    class="lastinput"
                    v-model="data.fillingStation"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
              <div class="LineContain">
                <div
                  class="lineListLeft lineListLeft1"
                  style="border-bottom: 1px solid black; border-top: none"
                >
                  STS:
                </div>
                <div
                  class="lineListRight lineListRight1"
                  style="border-bottom: 1px solid black; border-top: none"
                >
                  <input
                    type="text"
                    class="lastinput"
                    v-model="data.sts"
                    :disabled="this.roleId != 2 && this.roleId != 1"
                  />
                </div>
              </div>
            </div>
          </div> -->
          <div class="leftPicAndList">
            <div class="loadAndSearch">
              <div class="loadExcel" style="margin-left: 2px">
                <div
                  class="button"
                  @click="uploadFile()"
                  v-if="roleId == 2 || roleId == 1"
                >
                  更换
                </div>
                <div class="button" @click="clickDownLoadFile()">下载</div>
                <!-- <div
                class="multiButton"
                @click="deleteOne(id)"
                v-if="roleId == 2"
              >
                删除
              </div> -->
              </div>
            </div>

            <iframe
              v-show="src"
              :src="src"
              width="100%"
              height="90%"
              style="background: white"
              frameborder="0"
            ></iframe>
          </div>
        </div>
      </div>
    </div>

    <div class="dialog2" :style="{ display: uploadfile }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile"
          @change="getFile($event)"
          accept=".pdf,.PDF"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile()">
          确定
        </button>
      </div>
    </div>

    <div class="dialog2" :style="{ display: uploadfile1 }">
      <div class="upContain">
        <input
          type="file"
          ref="clearFile"
          class="addfile addfile1"
          @change="getFile1($event)"
          accept=".jpg,jpeg,png"
        />
      </div>
      <div class="fileName">
        <div v-show="fileName">文件名:{{ fileName }}</div>
      </div>
      <div class="upFileSrue">
        <button class="buttonUpdata" @click="cancelUp1()">取消</button>
        <button class="buttonUpdata buttonUpdata1" @click="submitAddFile1()">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
import _ from "lodash";
export default {
  name: "",
  data() {
    return {
      compare: {},
      locale: zhCn,
      tableData: [],
      tableWidth: null,
      show: "none",
      addOrEdit: "上传",
      currentNum: 0,
      roleId: null,
      totalPages: null,
      uploadfile: true,
      renderName: "",
      id: "",
      name: "",
      show1: "none",
      uploadfile1: "none",
      file: null,
      filePath: "",
      fileName: "",
      jtData: null,
      token: "",
      show3: "none",
      bigName: "",
      totalNumber: null,
      currentPdf: "",
      newAdd: "",
      src: "",
      deleteRemoveteOne: "",
      token: "",
      certificateType: "",
      filePath: "",

      data: {
        imo_number: "",
        mmsi_number: "",
        wail: "",
        weitongNumber: "",
        marineMobilePhone: "",
        totalLength: "",
        moldedBreadth: "",
        depthMoulded: "",
        fullLoadDraft: "",
        hostPower: "",
        sidePushPower: "",
        manning: "",
        cargoHoldType: "",
        cargoCapacity: "",
        maxLoadingRate: "",
        maxFillingRate: "",
        gcu_capacity: "",
        fillingStation: "",
        sts: "",
        img: "",
        loadName: "",
        id: "",
        certificateType: null,
      },
      imgName: "上传图片",
      src1: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    uploadImage() {
      this.uploadfile1 = "block";
    },

    backIndexPage() {
      if (this.roleId == 2 || this.roleId == 1) {
        let equal = _.isEqual(this.data, JSON.parse(this.compare));
        if (equal) {
          this.$router.push({
            path: "/app.shipSpecificationSee",
            query: {
              name: this.bigName,
              id: this.certificateType,
            },
          });
        } else {
          this.$confirm("数据信息有变化是否保存再离开？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            // type: "warning",
          })
            .then(() => {
              this.sureAdd();
              this.$router.push({
                path: "/app.shipSpecificationSee",
                query: {
                  name: this.bigName,
                  id: this.certificateType,
                },
              });
            })
            .catch(() => {
              this.$router.push({
                path: "/app.shipSpecificationSee",
                query: {
                  name: this.bigName,
                  id: this.certificateType,
                },
              });
            });
        }
      } else {
        this.$router.push({
          path: "/app.shipSpecificationSee",
          query: {
            name: this.bigName,
            id: this.certificateType,
          },
        });
      }
    },

    getLastTime() {
      let date = new Date();

      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + date.getMonth() + 1;
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      let hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
      let min =
        date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
      let second =
        date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
      return `${year}/${month}/${day} ${hour}:${min}:${second}`;
    },
    // 上传文件到远程
    submitAddFile() {
      if (this.file) {
        let data = {
          file: this.file,
          type: 6,
          // fileName: "",
        };
        service({
          method: "post",
          url: "/system/upload-file",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            this.filePath = res.data;
            this.src = `${this.$link}standard/${res.data}`;

            this.uploadfile = "none";
            this.data.file = res.data;
            this.$message({
              message: "文件选择成功",
              type: "success",
            });
          })
          .catch((err) => {
            this.uploadfile = "none";
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    submitAddFile1() {
      if (this.file) {
        let data = {
          file: this.file,
          type: 6,
          // fileName: "",
        };
        service({
          method: "post",
          url: "/system/upload-file",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            // this.filePath = res.data;
            this.data.img = res.data;
            this.src1 = `${this.$link}standard/${res.data}`;
            this.uploadfile1 = "none";

            this.$message({
              message: "文件选择成功",
              type: "success",
            });
            this.imgName = "更换";
            document.getElementsByClassName("addfile1")[0].value = "";
            this.fileName = "";
          })
          .catch((err) => {
            this.uploadfile = "none";
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    // 修改list
    sureAdd() {
      if (this.id) {
        this.data.id = this.id;
        this.data.certificateType = parseInt(this.certificateType);

        // return;
        service({
          method: "put",
          data: this.data,
          url: "/ship-standard",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              // this.deleteRomoteFile();
              this.show = "none";
              this.$router.push("/app.shipSpecificationSee");
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },
    deleteRomoteFile() {
      let data = {
        fileName: this.deleteRemoveteOne,
        type: 6,
      };
      service({
        method: "delete",
        url: `/system/delete-file`,
        params: data,
      }).then((r) => {});
    },
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },

    //批量删除结束=============================

    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
      this.addOrEdit = "上传";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
      document.getElementsByClassName("addfile")[0].value = "";
    },
    getFile1(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
      document.getElementsByClassName("addfile1")[0].value = "";
    },
    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
      document.getElementsByClassName("addfile")[0].value = "";
    },
    cancelUp1() {
      this.file = "";
      this.fileName = "";
      this.uploadfile1 = "none";
      document.getElementsByClassName("addfile1")[0].value = "";
    },
    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-standard/${a}`,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 下载pdf
    async clickDownLoadFile() {
      let that = this;
      let time = this.getFileName();
      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);
      let url = this.$loadFile + "/system/download/" + this.filePath;
      // return;
      axios({
        method: "get",
        url: url,
        responseType: "blob", // 关键：设置响应类型为blob
        params: {
          type: 6,
        },
        headers: {
          token: that.token,
        },
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.download = time + "-" + this.bigName + ".pdf";

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      });
    },

    close() {
      this.show = "none";
      this.show1 = "none";
      this.notPassMessage = null;
    },

    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
    async getRenderList() {
      let data = {
        page: 1,
        size: 1,
        certificateType: this.certificateType,
      };
      await service({
        methods: "get",
        url: "/ship-standard/find-one-page",
        params: data,
      })
        .then((e) => {
          this.id = e.data.content[0].id;

          this.src1 = `${this.$link}standard/${e.data.content[0].img}`;
          if (e.data.content[0].img) {
            this.imgName = "更换";
          } else {
            this.imgName = "上传";
          }

          this.src = `${this.$link}standard/${e.data.content[0].file}`;
          this.filePath = e.data.content[0].file;
          this.data = e.data.content[0];
          this.compare = JSON.stringify(e.data.content[0]);
        })
        .catch((err) => {});
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();

    this.roleId = sessionStorage.getItem("role");

    // 文件id

    // 文件类型
    this.certificateType = this.$route.query.id;
    // 文件大类

    this.deleteRemoveteOne = this.$route.query.file;
    if (this.certificateType == 1) {
      this.bigName = "海港未来";
    } else if (this.certificateType == 2) {
      this.bigName = "海港致远";
    } else if (this.certificateType == 3) {
      this.bigName = "淮河能源启航";
    }
    this.getRenderList();
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
.manyInput {
  width: 780px;
  // height: 80vh;

  // background: red;
  margin: auto;

  // overflow: scroll;
  .iuptInnerContain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .inputInner {
      width: 375px;
      min-height: 35px;
      // background: blue;
      margin-right: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      color: #365488;
      .name {
        width: 150px;
        height: 100%;
        line-height: 4vh;
        text-align: right;
        font-size: 15px;
      }
      // .name1 {
      //   width: 210px;
      //   margin-left: 10px;
      //   height: 3vh;
      //   line-height: 3vh;
      //   text-indent: 1em;
      //   outline: none;
      //   font-size: 15px;
      //   border: none;
      //   background: #ebebeb;
      //   color: #365488;
      // }
      .inputContainer {
        width: 210px;
        margin-left: 5px;
      }
      .el-input__inner {
        background: white !important;
      }
      input {
        width: 220px;
        height: 34px;
        margin-left: 5px;
        border-radius: 5px;
        text-indent: 1em;
        outline: none;
        border: none;
        background: white !important;
        color: #365488;
        border: 1px solid #dcdfe6;
      }
      input::-webkit-input-placeholder {
        color: #a8abb2;
      }
      input[type="date"] {
        // padding: 5px;
        color: #365488;
        text-align: left;
        // border: 1px solid #365488;
        border-radius: 4px;
        // background-color: #fff;
        box-sizing: border-box; /* 确保内边距和边框不会影响元素的总宽度 */
      }
      // input[type="number"] {
      //   appearance: textfield;
      //   -moz-appearance: textfield;
      // }
      // 　　input[type="number"]::-webkit-inner-spin-button,
      // 　　input[type="number"]::-webkit-outer-spin-button {
      //   -webkit-appearance: none;
      //   margin: 0;
      // }
    }
    .el-date-picker .el-picker-panel {
      background-color: white !important; /* 你想要的背景颜色 */
    }
  }
}
.centerContainner {
  width: calc(100% - 20px);
  height: 72vh;
  margin: auto;
  // background: red;
  overflow: auto;
  display: flex;
  justify-content: space-between;
}
.lastListContain {
  width: 100%;
  height: 30vh;
  // background: red;
  margin: auto;
  margin-top: 1vh;
  // border-bottom: 1px solid black;
  .LineContain {
    width: 100%;
    height: 2.947vh;
    // background: red;
    display: flex;
    .lineListLeft {
      width: 20%;
      // min-width: 70px;
      height: 100%;
      display: flex;
      align-items: center;
      // background-color: blue;
      border-left: 1px solid black;
      border-top: 1px solid black;
      color: black;
      padding-left: 5px;
      font-size: 1vw;
    }

    .lineListRight {
      width: 30%;
      // min-width: 105px;
      height: 100%;
      // background-color: green;
      border-left: 1px solid black;
      border-top: 1px solid black;
      border-right: 1px solid black;
      input {
        width: 100%;
        height: 100%;
        line-height: 100%;
        border: none;
        outline: none;
        padding-left: 5px;
        font-size: 1vw;
      }
      .lastinput {
        width: 100%;
        height: 20px;
      }
    }
  }
}
iframe {
  background-color: #f0f0f0; /* 修改为需要的背景颜色 */
  border: none; /* 去除边框 */
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}
.topImage {
  width: 100%;
  height: 25vh;
  // background: red;
}
/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}

.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    overflow: auto;
    overflow-x: hidden;
    margin-top: 1vh;
    background: white;

    .loadAndSearch {
      width: 100%;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      margin-top: 10px !important;
    }
  }
}
</style>